{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
    else
      assign text_color = ''
  endcase

  if section.blocks.size > 0
    assign show_navbar_toggle = true
  endif

  for block in section.blocks
    if forloop.first
      assign firstType = block.type
    endif
  endfor
  assign entry_blocks = section.blocks | where: 'type', 'entry'
  assign tab_blocks = section.blocks | where: 'type', 'tab'
  assign button_blocks = section.blocks | where: 'type', 'button'
  assign sales_channel_blocks = section.blocks | where: 'type', 'sales_channel'
-%}
<label for="sticky-navbar" class="navbar-backdrop as-navbar-backdrop"></label>
<nav class="{{ background_color }} as-navbar-wrapper navbar-wrapper" id="sticky-navbar">
  <div class="as-lg-flag d-lg-none"></div>
  <div class="container navbar-container {{ text_color }}">
    <div class="d-flex align-items-center">
      {%- if section.settings.product_title != blank -%}
        <a href="#" class="navbar-brand fw-bold">{{ section.settings.product_title }}</a>
      {%- endif -%}
      <div class="d-flex justify-content-start flex-grow-1 d-lg-none">
        {%- if show_navbar_toggle -%}
          <span class="p-2 cursor-pointer as-collapse-toggle toggle-icon">
            {% render 'icon-chevron-down' %}
          </span>
        {%- endif -%}
      </div>
      <div class="as-nav navbar flex-grow-1 nav-item-wrap {{ background_color }} collapse">
        <div class="nav-tab-wrap {{ section.settings.pc_tab_active_style }}">
          <ul class="nav position-relative nav-tab">
            {%- if tab_blocks.size > 0 -%}
              {%- for block in tab_blocks -%}
                <li class="nav-item">
                  <a data-section-number="{{ block.settings.section_number }}" class="as-tabs nav-link {{ text_color }} {% if firstType == 'tab' %}{% if forloop.first %}border-top-0{% endif %}{% endif %}">{{ block.settings.tab_label }}</a>
                </li>
              {%- endfor -%}
            {%- endif -%}
          </ul>
      </div>
      <div class="nav-entry-wrap">
        <ul class="nav position-relative nav-entry">
          {%- if entry_blocks.size > 0 -%}
            {%- for block in entry_blocks -%}
              <li class="nav-item">
                <a {% render 'link', link: block.settings.entry_link %} {% if block.settings.entry_link != blank %}href="{{ block.settings.entry_link }}"{% endif %} class="nav-link {{ text_color }} {% if firstType == 'entry' %}{% if forloop.first %}border-top-0{% endif %}{% endif %}">{{ block.settings.entry_label }}</a>
              </li>
            {%- endfor -%}
          {%- endif -%}
        </ul>
        </div>
      </div>
      {% if sales_channel_blocks.size == 0 %}
        {%- for block in button_blocks -%}
          {% liquid
            case block.settings.button_color
              when 'light'
                assign btn_style = 'btn-light'
              when 'dark'
                assign btn_style = 'btn-dark'
              when 'accent1'
                assign btn_style = 'btn-primary'
            endcase
          %}
          {%- if block.settings.button_label != blank -%}
            <div class="navbar-btn">
              {%- if block.settings.button_link != blank -%}
                <a {% render 'link', link: block.settings.button_link %} href="{{ block.settings.button_link }}" class="btn {{ btn_style }} flex-nowrap">
                  {{ block.settings.button_label }}
                </a>
              {%- else -%}
                <div class="btn {{ btn_style }} flex-nowrap disabled cursor-default">
                  {{ block.settings.button_label }}
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        {%- endfor -%}
      {% endif %}
      {%- for block in sales_channel_blocks -%}
        {% if sales_channel_blocks.size == 1 %}
          {% liquid
              case block.settings.button_color
                when 'light'
                  assign btn_style = 'btn-light'
                when 'dark'
                  assign btn_style = 'btn-dark'
                when 'accent1'
                  assign btn_style = 'btn-primary'
              endcase
            %}
          {%- if block.settings.title != blank -%}
            <div class="navbar-btn">
              {%- if block.settings.channel_link != blank -%}
                <a {% render 'link', link: block.settings.channel_link %} href="{{ block.settings.channel_link }}" class="btn {{ btn_style }} flex-nowrap" target="_blank">
                  {{ block.settings.title }}
                </a>
              {%- else -%}
                <div class="btn {{ btn_style }} flex-nowrap disabled cursor-default">
                  {{ block.settings.title }}
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        {% else %}
          <div class="navbar-btn as-sales-channel-modal-btn">
            <a data-bs-toggle="modal" data-bs-target="#sales-channel-modal-for-sticky-navbar" class="btn btn-primary flex-nowrap">
              {{ 'sections.sticky_navbar.where_to_buy' | t }}
            </a>
          </div>
        {% endif %}
        {% break %}
      {%- endfor -%}
      {%- assign app_blocks = section.blocks | where: 'type', '@app' -%}
      {%- if app_blocks.size > 0 -%}
        {%- for block in app_blocks -%}
          {% render block %}
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</nav>
{% if sales_channel_blocks.size > 1 %}
  {% render 'sales-channel-modal', blocks: sales_channel_blocks, section_name: 'sticky-navbar' %}
{% endif %}

{% schema %}
  {
    "name": "Sticky navbar",
    "tag": "section",
    "class": "sticky-navbar as-sticky-navbar position-sticky",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "type": "text",
        "id": "product_title",
        "default": "Prodcut title",
        "label": "Prodcut title"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          }, {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "pc_tab_active_style",
        "label": "Tab hover style",
        "options": [
          {
            "value": "underline",
            "label": "Underline"
          }, {
            "value": "highlight",
            "label": "Highlight"
          }
        ],
        "default": "underline"
      }
    ],
    "blocks": [
      {
        "type": "tab",
        "name": "Tab",
        "settings": [
          {
            "type": "text",
            "id": "tab_label",
            "default": "Tab",
            "label": "Tab label"
          }, 
          {
            "type": "text",
            "id": "section_number",
            "label": "Section number",
            "info": "Please enter 3 if you want to anchor to the third section."
          }
        ]
      }, 
      {
        "type": "entry",
        "name": "Entry",
        "settings": [
          {
            "type": "text",
            "id": "entry_label",
            "default": "Item",
            "label": "Entry label"
          }, 
          {
            "type": "url",
            "id": "entry_link",
            "label": "Entry link"
          }
        ]
      },
      {
        "type": "button",
        "name": "Button",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Buy now"
          }, 
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }, 
          {
            "type": "select",
            "id": "button_color",
            "label": "Button color",
            "options": [
              {
                "value": "accent1",
                "label": "Accent 1"
              }, 
              {
                "value": "light",
                "label": "White"
              }, 
              {
                "value": "dark",
                "label": "Black"
              }
            ],
            "default": "accent1"
          }
        ]
      },
      {
        "type": "sales_channel",
        "name": "Sales channel",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Channel name"
          }, 
          {
            "type": "url",
            "id": "channel_link",
            "label": "Channel link"
          }, 
          {
            "label": "Channel logo",
            "type": "image_picker",
            "id": "channel_logo"
          },
          {
            "type": "select",
            "id": "button_color",
            "label": "Button color",
            "options": [
              {
                "value": "accent1",
                "label": "Accent 1"
              }, 
              {
                "value": "light",
                "label": "White"
              }, 
              {
                "value": "dark",
                "label": "Black"
              }
            ],
            "default": "accent1"
          }
        ]
      },
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "Sticky navbar"
      }
    ]
  }
{% endschema %}